@extends('admin.common.main')
@section('css')
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css" />
<style>
</style>
@endsection
@section('cnt')
<div class="x-body page-container">
    @include('admin.common.validate')
    @include('admin.common.msg')
	<form method="post" action="{{ route('admin.fangattr.update',['id'=>$find['id']]) }}" id="form-member-add">
		<input type="hidden" name="_method" value="PUT">
        {{ csrf_field() }}
		<div class="layui-form-item">
				  <label for="username" class="layui-form-label">
					  <span class="x-red">*</span>是否顶级
				  </label> 
				  <div class="layui-input-inline" >
					  <select name="pid" id="pid">
						<option value="0" @if($find['pid'] == 0) selected @endif>==顶级==</option>
						@foreach($data as $item)
							<option value="{{ $item->id }}" @if($find['pid'] == $item->id) selected @endif>{{ $item->name }}</option>
						@endforeach
					  </select>
				  </div>
			  </div>
          
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>节点名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="name" name="name" required=""
                  autocomplete="off" class="layui-input" value="{{ $find['name'] }}">
              </div>
          </div>

          <div class="layui-form-item">
              <label for="field_name" class="layui-form-label">
                  <span class="x-red">*</span>字段名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="field_name" name="field_name" 
                  autocomplete="off" class="layui-input" value="{{ $find['field_name'] }}">
              </div>
          </div>
         <div class="layui-form-item">
              <label for="icon" class="layui-form-label">
                  <span class="x-red">*</span>图标
              </label>
              <div class="layui-input-inline">
                  {{-- 表单提交的时候的路径的地址 --}}
                  <input type="hidden" name="icon" id="icon" value="{{ $find['icon'] }}">
                  <div id="picker">上传图标</div>
                  <div id="imgdiv">
                      <img src="{{ $find['icon'] }}" id="img">
                  </div>
              </div>
          </div>
         
          
          </div>
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" type="submit">
                  修改节点
              </button>
          </div>
      </form>
</div>
@endsection
@section('js')
<script src="/js/vue.js"></script>
<script src="/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script>

    //前端表单验证
    $("#form-member-add").validate({
        //规则
        rules:{
            //表单元素名称
            name:{
                required:true
            }
        },
        messages:{
            name:"请输入属性名称",
            field_name:"请输入字段名称",
            icon:"请上传icon",
        },
        onkeyup:false,
        success:"valid",
        submitHandler:function (form) {
            console.log(form)
            form.submit();
        }
    });

    //初始化webuploader
    //
    var uploader = WebUploader.create({
        //选完之后，是否自动上传
        auto:true,
        //swf文件路径
        swf:'/webuploader/Uploader.swf',
        //文件接收服务端,上传的php代码
        server:'{{ route('admin.fangattr.upfile') }}',
        //选择文件的按钮
        pick:{
            id:"#picker",
            //是否开启选择多个文件的能力
            multiple:false
        },
        //文件上传携带的参数
        formData:{
            _token:'{{ csrf_token() }}'
        },
        //文件上传的表单名称【默认是file】
        fileVal:'file',
        //压缩image,默认如果是jpeg，文件上传前会进行压缩再上传
        resize:true
    });

    //文件上传之后的回调 【这是插件内置方法】
    uploader.on('uploadSuccess',function(file,ret){
        //图片的路径
        let src = ret.url;
        //给表单添加value变量
        $("#icon").val(src);
        //给图片添加src
        $("#img").attr('src',src);
        $("#icon").css('display','block');
    });

</script>
@endsection